const vueSticky = {}
let listenAction
vueSticky.install = Vue => {
  Vue.directive( 'sticky', {
    inserted( el, binding ) {
      const params = binding.value || {}
      const stickyTop = params.stickyTop || 0
      const zIndex = params.zIndex || 1000
      const elStyle = el.style

      elStyle.position = '-webkit-sticky'
      elStyle.position = 'sticky'
      // if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
      // if (~elStyle.position.indexOf('sticky')) {
      //     elStyle.top = `${stickyTop}px`;
      //     elStyle.zIndex = zIndex;
      //     return
      // }
      const elHeight = el.getBoundingClientRect().height
      const elWidth = el.getBoundingClientRect().width
      elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`

      const parentElm = el.parentNode || document.documentElement
      const placeholder = document.createElement( 'div' )
      placeholder.style.display = 'none'
      placeholder.style.width = `${elWidth}px`
      placeholder.style.height = `${elHeight}px`
      parentElm.insertBefore( placeholder, el )

      let active = false

      const getScroll = ( target, top ) => {
        const prop = top ? 'pageYOffset' : 'pageXOffset'
        const method = top ? 'scrollTop' : 'scrollLeft'
        let ret = target[prop]
        if ( typeof ret !== 'number' ) {
          ret = window.document.documentElement[method]
        }
        return ret
      }

      const sticky = () => {
        if ( active ) {
          return
        }
        if ( !elStyle.height ) {
          elStyle.height = `${el.offsetHeight}px`
        }

        elStyle.position = 'fixed'
        elStyle.width = `${elWidth}px`
        placeholder.style.display = 'inline-block'
        active = true
      }

      const reset = () => {
        if ( !active ) {
          return
        }

        elStyle.position = ''
        placeholder.style.display = 'none'
        active = false
      }

      const check = () => {
        const scrollTop = getScroll( window, true )
        const offsetTop = el.getBoundingClientRect().top
        if ( offsetTop < stickyTop ) {
          sticky()
        } else {
          if ( scrollTop < elHeight + stickyTop ) {
            reset()
          }
        }
      }
      listenAction = () => {
        check()
      }

      window.addEventListener( 'scroll', listenAction )
    },

    unbind() {
      window.removeEventListener( 'scroll', listenAction )
    }
  } )
}

export default vueSticky

